<template>
  <div class="app-page">
    <el-table-form ref="form" :model="query">
      <el-form-item label="调拨单号" prop="name">
        <el-input v-model="query.stockTransCode" placeholder="请输入" clearable />
      </el-form-item>

      <el-form-item label="仓库(出)">
        <el-select v-model="query.outStoreId" placeholder="请选择">
          <el-option label="请选择" :value="0" />
          <el-option
            v-for="item in storeMap"
            :key="item.storeId"
            :label="item.rName"
            :value="item.storeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item :table-form-merge="0.3">
        <el-button
          circle
          type="primary"
        ><svg-icon
          class="map"
          icon-class="exchange"
          @click="exchange"
        /></el-button>
      </el-form-item>

      <el-form-item label="仓库(入)">
        <el-select v-model="query.inStoreId" placeholder="请选择">
          <el-option label="请选择" :value="0" />
          <el-option
            v-for="item in storeMap"
            :key="item.storeId"
            :label="item.rName"
            :value="item.storeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item :table-form-merge="2" class="merge-item">
        <el-select
          v-model="query.dateType"
          style="width: 170px; margin-right: 2px;"
        >
          <el-option label="创建时间" value="createTime" />
          <el-option label="审核时间" value="enterDt" />
        </el-select>
        <el-date-picker
          v-model="query.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="状态" prop="transStatus">
        <el-select v-model="query.transStatus" placeholder="请选择">
          <el-option label="请选择" :value="0" />
          <el-option
            v-for="item in transStatusMap"
            :key="item.key"
            :label="item.desc"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="query.waitAudit" :true-label="1" :false-label="0">待处理</el-checkbox>
      </el-form-item>

      <template v-slot:btns>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search"
        >查询</el-button>
      </template>
    </el-table-form>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="transferEditDialog"
        >调拨</el-button>
      </div>
    </div>

    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{ bottomOffset: 10 }"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />
    <transferEdit ref="transferEdit" />
  </div>
</template>

<script>
  import {
    selectStockTransBill,
    selectOrgSNNoAndReType,
    stockTransChangeStatus
  } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'
  import transferEdit from './components/transferEdit.vue'
  export default {
    name: 'transferManage',
    components: {
      transferEdit
    },
    data() {
      return {
        query: {
          inStoreId: 0,
          outStoreId: 0,
          stockTransCode: '',
          waitAudit: 0,
          dateType: 'createTime',
          date: [new Date(), new Date()]
        },
        storeMap: [],
        transStatusMap: [
          { value: -1, desc: '已作废', key: 'INVALID' },
          { value: 1, desc: '待审核', key: 'UNREVIEWED' },
          { value: 2, desc: '已审核', key: 'VALID' },
          { value: 4, desc: '驳回', key: 'REJECT' }
        ],
        reBillTypeMap: [
          { value: 1, desc: '调拨', key: 'DB' },
          { value: 2, desc: '充装', key: 'CZ' },
          { value: 5, desc: '采购', key: 'CG' },
          { value: 6, desc: '托管', key: 'TG' },
          { value: 101, desc: '销售', key: 'XS' },
          { value: 102, desc: '押/退', key: 'ZL' },
          { value: 103, desc: '欠/还', key: 'QP' },
          { value: 104, desc: '回收/置换', key: 'HS' },
          { value: 105, desc: '退货', key: 'TH' },
          { value: 106, desc: '冲红', key: 'CH' }
        ],
        tableData: {
          total: 0,
          column: [
            {
              prop: 'stockTransCode',
              label: '调拨单号',
              width: 150,
              render: (h, { row }) => (
              <el-link onClick={() => this.stockCodeHandle(row)}>
                {row.stockTransCode}
              </el-link>
            )
            },
            {
              prop: 'outStoreName',
              label: '仓库(出-->入)',
              width: 200,
              render: (h, { row }) => (
              <span>
                {row.outStoreName}
                <i class='el-icon-right' style='margin:0 10px'></i>
                {row.inStoreName}
              </span>
            )
            },
            {
              prop: 'createTime',
              label: '创建时间',
              width: 160,
              render: (h, { row }) => (
              <span>
                {row.createTime &&
                  parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}')}
              </span>
            )
            },
            {
              prop: 'applicant',
              label: '申请人'
            },
            {
              prop: 'carNumber',
              label: '车辆'
            },
            {
              prop: 'driver',
              label: '司机'
            },

            {
              prop: 'escort',
              label: '押运人'
            },
            {
              prop: 'checkUser',
              label: '审核人'
            },
            {
              prop: 'auditDt',
              label: '审核时间',
              width: 160,
              render: (h, { row }) => (
              <span>
                {row.auditDt &&
                  parseTime(row.auditDt, '{y}-{m}-{d} {h}:{i}:{s}')}
              </span>
            )
            },
            {
              prop: 'transStatus',
              label: '状态',
              render: (h, scope) => (
              <span style={scope.row.transStatus === 1 ? 'color:red' : ''}>
                {scope.row.transStatus &&
                  formatColumnMap(
                    this.transStatusMap,
                    'value',
                    scope.row.transStatus,
                    'desc'
                  )}
              </span>
            )
            },
            {
              label: '操作',
              align: 'center',
              fixed: 'right',
              width: 180,
              render: (h, { row, $index }) => {
                return (
                <div>
                  <el-link
                    size='mini'
                    onClick={() => this.examineEdit(row, $index)}
                  >
                    编辑
                  </el-link>
                  <el-link
                    size='mini'
                    onClick={() => this.examineHandler(row, $index)}
                  >
                    审核
                  </el-link>

                  <el-link
                    size='mini'
                    type='danger'
                    onClick={() => this.delHandler(row, $index)}
                  >
                    作废
                  </el-link>
                </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    watch: {
      'query.waitAudit': function(newVal) {
        this.search()
      }
    },
    async created() {
      this.initStoreMap()
    },
    methods: {
      _getQuery(obj) {
        const query = {}
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] !== '') {
              query[key] = obj[key]
            }
          }
        }
        return query
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          ...this._getQuery(this.query),
          currentPage,
          pageSize
        }

        if (query.dateType === 'createTime' && this.query.date) {
          query.createTime = parseTime(this.query.date[0], '{y}-{m}-{d}')
          query.createTimeEnd = parseTime(this.query.date[1], '{y}-{m}-{d}')
        }
        if (query.dateType === 'enterDt') {
          query.enterDt = parseTime(this.query.date[0], '{y}-{m}-{d}')
          query.enterDtEnd = parseTime(this.query.date[1], '{y}-{m}-{d}')
        }
        delete query.date
        delete query.dateType
        const res = await selectStockTransBill(query)
        this.tableData.data = res.data.rows
        this.tableData.total = res.data.total
      },
      exchange() {
        const num1 = this.query.inStoreId
        const num2 = this.query.outStoreId
        const temp = num1
        this.query.inStoreId = num2
        this.query.outStoreId = temp
      },

      initStoreMap() {
        selectOrgSNNoAndReType({
          currentPage: 1,
          pageSize: 9999,
          reType: 4
        }).then(res => {
          this.storeMap = res.data.rows
        })
      },

      transferEditDialog() {
        this.$refs.transferEdit.open('add')
      },
      examineHandler(row) {
        this.$refs.transferEdit.open('examine', row)
      },
      examineEdit(row) {
        this.$refs.transferEdit.open('edit', row)
      },
      stockCodeHandle(row) {
        this.$refs.transferEdit.open('info', row)
      },
      delHandler(row) {
        this.$confirm('确定作废吗？', '提示', {
          type: 'warning'
        }).then(() => {
          const loading = this.$message({
            message: '正在作废',
            duration: 0,
            iconClass: 'el-icon-loading'
          })
          stockTransChangeStatus({
            transStatus: '4',
            stockTransCode: row.stockTransCode
          })
            .then(() => {
              this.search()
              this.$notify({
                title: '提示',
                message: '作废成功',
                type: 'success',
                duration: 2000
              })
            })
            .finally(() => {
              loading.close()
            })
        })
      },
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },

      async update(row) {
        await this.$refs.add.open(row)
        this.$refs.lbTable.fetch({ currentPage: 1 })
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-form-item .el-form-item {
  margin-bottom: 0;
}
.merge-item {
  /deep/ .el-form-item__content {
    display: flex;
  }
}
.btn-group {
  display: flex;
  justify-content: space-between;
}
</style>
